<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    @query="getDataList"
    :safe-area-inset-bottom="true"
    bg-color="#F2F3FA"
  >
    <!-- <template #top>
      <view class="top">
        <view :style="customStyle">
          <view class="title">家庭商品区</view>
          <s-block-item
            type="SearchBar"
            :data="SearchBarTemplate.property"
            :styles="SearchBarTemplate.property.style"
          ></s-block-item>
        </view>
      </view>
    </template> -->
    <view class="main">
      <!-- <view style="padding: 25rpx">
        <view class="search">
          <image
            style="width: 50rpx; height: 50rpx; margin-right: 15rpx"
            src="/static/images/search.png"
          ></image>
          <input placeholder="搜索商品" />
        </view>
      </view> -->

      <!-- <view class="header-bg">
        <img class="bg" src="@/static/images/ssjt.png" alt="" />
      </view> -->

      <view class="cate">
        <view
          class="cate-I"
          v-for="(item, index) in cateList"
          :key="index"
          @click="ToCategory(index)"
        >
          <image :src="item.url"></image>
          <view>{{ item.name }}</view>
        </view>
      </view>

      <view class="content">
        <view class="content-box" :style="customStyle">
          <s-block-item
            v-if="dataList.length > 0"
            type="ProductList"
            :productList="dataList"
            :data="template.property"
            :styles="template.property.style"
          ></s-block-item>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import SpuApi from '@/sheep/api/product/spu.js';
import sheep from '@/sheep';
import { onShow } from '@dcloudio/uni-app';
const dataList = ref([]);
const List = ref([]);
const cateList = ref([
  {
    url: '/static/images/lsxf.png',
    name: '绿色消费',
  },
  {
    url: '/static/images/qyzz.png',
    name: '权益增值',
  },
  {
    url: '/static/images/gjgx.png',
    name: '共建共享',
  },
  {
    url: '/static/images/gtfy.png',
    name: '共同富裕',
  },
  //   {
  //     url: '/static/images/kbzx.png',
  //     name: '口碑甄选',
  //   },
]);

const paging = ref(null);
const pageInfo = reactive({
  pageNo: 1,
  pageSize: 10,
  partitionType: 2,
});
const ToCategory = (index) => {
  uni.navigateTo({
    url: '/pages/index/categorys?index=' + index,
  });
};
const getDataList = async (pageNo, pageSize) => {
  pageInfo.pageNo = pageNo ? pageNo : pageInfo.pageNo;
  pageInfo.pageSize = pageSize ? pageSize : pageInfo.pageSize;
  console.log('pageInfo', pageInfo);
  // 获得商品 SPU 分页
  let res = await SpuApi.getSpuPage(pageInfo);
  console.log('获得商品 SPU 分页', res);
  // setTimeout(() => {
  if (res.code == 0) {
    // List.value.push(...res.data.list)
    paging.value.complete(res.data.list);
    console.log(' dataList', dataList.value);
  } else {
    paging.value.complete(false);
  }
  // paging.value.complete(10);
  // }, 1000);
};
const appstore = uni.getStorageSync('app-store');
// console.log('appstore', appstore);
// let template = JSON.parse(appstore).template.home.components.find(item => item.id == 'ProductList')
// let SearchBarTemplate = JSON.parse(appstore).template.home.components.find(item => item.id == 'SearchBar')

let template = {
  property: {
    layoutType: 'threeCol',
    fields: {
      name: {
        show: true,
        color: '#000',
      },
      price: {
        show: true,
        color: '#ff3000',
      },
    },
    badge: {
      show: false,
      imgUrl: '',
    },
    borderRadiusTop: 8,
    borderRadiusBottom: 8,
    space: 8,
    spuIds: [641, 642],
    style: {
      bgType: 'color',
      bgColor: '',
      marginLeft: 8,
      marginRight: 8,
      marginBottom: 8,
      padding: '0 35rpx',
    },
  },
};
let SearchBarTemplate = {
  property: {
    height: 28,
    showScan: false,
    borderRadius: 10,
    placeholder: '搜索商品',
    placeholderPosition: 'left',
    backgroundColor: 'rgb(238, 238, 238)',
    textColor: 'rgb(150, 151, 153)',
    hotKeywords: [''],
    style: {
      bgType: 'color',
      bgColor: '#fff',
      marginBottom: 8,
      paddingTop: 8,
      paddingRight: 8,
      paddingBottom: 8,
      paddingLeft: 8,
    },
  },
};
console.log('template', template);
// const template = sheep.$store('app').template?.home.components.find(item => item.id == 'ProductList');
// console.log(' goodCardTemplate', goodCardTemplate);
const customStyle = ref('');
const getElementStyle = () => {
  const systemInfo = uni.getSystemInfoSync();

  let windowWidth = systemInfo.windowWidth;

  let styleObj = {
    width: windowWidth - 2 * 10 + 'px',
  };
  customStyle.value = styleObj;
};
onShow(() => {
  getElementStyle();
});
</script>

<style lang="scss" scoped>
.main {
  padding-top: 420rpx;
  // min-height: 100vh;
  // width: 100vw;
  //   background: linear-gradient(180deg, #54c5c1 18%, rgba(255, 255, 255, 0) 80%);
  // background-image: url("/static/images/me-bj.png");
  // background-position: center;
  // background-size: cover;
  background-image: url('/static/images/product.png');
  background-size: 100% 65%; /* 覆盖容器，可能裁剪 */
  // background-size: center;
  background-repeat: no-repeat; /* 通常搭配使用以避免重复 */
}
.search {
  border-radius: 40rpx;
  opacity: 0.9;
  display: flex;
  align-items: center;
  padding: 18rpx 28rpx;
  background: #ffffff;
  margin-top: 50rpx;
}
.top {
  display: flex;
  justify-content: center;
  height: 20%;
  background: #3f72eb;

  .title {
    color: #fff;
    font-size: 18px;
    font-weight: 550;
    margin: 20px 0px 10px 5px;
    padding: 5px;
  }
}

.content {
  display: flex;
  justify-content: center;
  // border-radius: 30px 30px 0 0;
  // background: #F2F3FA;

  .content-box {
    padding: 10px;
  }
}

.header-bg {
  .bg {
    width: 100%;
  }
}

.cate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15rpx 30rpx;
}
.cate-I {
  font-size: 26rpx;
  text-align: center;
  image {
    height: 60rpx;
    width: 60rpx;
  }
}
</style>